<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            #tab{
                width: 480px;
                margin: 20px auto;
                border: 1px solid red;
            }
            ul{
                width: 100%;
                overflow: hidden;
            }
            ul li{
                float: left;
                width: 160px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color: #cccccc;
            }
            
            ul li a{
                text-decoration: none;
                color:black;
            }
            li.active{
                background-color: red;
            }
            p{
                display: none;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: red;
            }
            p.active{
                display: block;
                
            }
            
        </style>
    </head>
    <body>
        <div id="tab">
            <ul>
                <li class="active">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">新闻</a>
                </li>
                <li>
                    <a href="#">图片</a>
                </li>        
            </ul>
            <p class="active">首页内容</p>
            <p>新闻内容</p>
            <p>图片内容</p>
            
            
        </div>
    </body>
    <script type="text/javascript">
        

        //变量提升
        /*
        var a
        console.log(a);
        a = 2;
        console.log(a);
        */
        /*
        var a;
        console.log(a);
        {
             a = 3;
            console.log(a);
        }
        console.log(a);
        */
        /*
         console.log(a);
        {
            //let声明的变量不会存在变量提升，属于局部作用域
            let a  = 3;
            console.log(a);
        }
         console.log(a);
         */

  
        
        let olis = document.getElementsByTagName('li');
        let oPs = document.getElementsByTagName('p');

        
        for(let i = 0; i < olis.length; i++){

            olis[i].onclick = function() {
                for(let j = 0; j < olis.length; j++){
                    olis[j].className = '';
                    oPs[j].className = ''
                } 
                this.className = 'active';
                 oPs[i].className = 'active';
            }

        }
    </script>
</html>